<cd-modal [pageURL]="pageURL">
  <span class="modal-title"
        i18n>{{ action | titlecase }} {{ resource | upperFirst }}</span>
  <ng-container class="modal-content">
    <form name="initiatorForm"
          #formDir="ngForm"
          [formGroup]="initiatorForm"
          novalidate>
      <div class="modal-body">
        <!-- Hosts -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 i18n>Hosts
          </label>
          <div class="cd-col-form-input">
            <!-- Add host -->
            <div class="custom-control custom-checkbox"
                 formGroupName="addHost">
              <input type="checkbox"
                     class="custom-control-input"
                     id="addHostCheck"
                     name="addHostCheck"
                     formControlName="addHostCheck"
                     (change)="setAddHostCheck()"/>
              <label class="custom-control-label mb-0"
                     for="addHostCheck"
                     i18n>Add host</label>
              <cd-help-text>
                <span i18n>Allow specific hosts to run NVMe/TCP commands to the NVMe subsystem.</span>
              </cd-help-text>
              <div formArrayName="addedHosts"
                   *ngIf="initiatorForm.get('addHost.addHostCheck').value"  >
                <div *ngFor="let host of addedHosts.controls; let hi = index"
                     class="input-group cd-mb my-1">
                  <input class="cd-form-control"
                         type="text"
                         i18n-placeholder
                         placeholder="Add host nqn"
                         [required]="!initiatorForm.getValue('allowAnyHost')"
                         [formControlName]="hi"/>
                  <button class="btn btn-light"
                          type="button"
                          id="add-button-{{hi}}"
                          [disabled]="initiatorForm.get('addHost.addedHosts').controls[hi].invalid
                          || initiatorForm.get('addHost.addedHosts').errors?.duplicate
                          || initiatorForm.get('addHost.addedHosts').controls.length === 32
                          || (initiatorForm.get('addHost.addedHosts').controls.length !== 1 && initiatorForm.get('addHost.addedHosts').controls.length !== hi+1)"
                          (click)="addHost()">
                    <i class="fa fa-plus"></i>
                  </button>
                  <button class="btn btn-light"
                          type="button"
                          id="delete-button-{{hi}}"
                          [disabled]="addedHosts.controls.length === 1"
                          (click)="removeHost(hi)">
                    <i class="fa fa-trash-o"></i>
                  </button>
                  <ng-container *ngIf="initiatorForm.get('addHost.addedHosts').controls[hi].invalid
                                && (initiatorForm.get('addHost.addedHosts').controls[hi].dirty
                                || initiatorForm.get('addHost.addedHosts').controls[hi].touched)">
                    <span class="invalid-feedback"
                          *ngIf="initiatorForm.get('addHost.addedHosts').controls[hi].errors?.required"
                          i18n>This field is required.</span>
                    <span class="invalid-feedback"
                          *ngIf="initiatorForm.get('addHost.addedHosts').controls[hi].errors?.pattern"
                          i18n>Expected NQN format<br/>&lt;<code>nqn.$year-$month.$reverseDomainName:$utf8-string</code>".&gt; or <br/>&lt;<code>nqn.2014-08.org.nvmexpress:uuid:$UUID-string</code>".&gt;</span>
                    <span class="invalid-feedback"
                          *ngIf="initiatorForm.get('addHost.addedHosts').controls[hi].errors?.maxLength"
                          i18n>An NQN may not be more than 223 bytes in length.</span>
                  </ng-container>
                </div>
                <span class="invalid-feedback"
                      *ngIf="initiatorForm.get('addHost.addedHosts').errors?.duplicate"
                      i18n>Duplicate entry detected. Enter a unique value.</span>
              </div>
            </div>
            <!-- Allow any host -->
            <div class="custom-control custom-checkbox pt-0">
              <input type="checkbox"
                     class="custom-control-input"
                     id="allowAnyHost"
                     name="allowAnyHost"
                     formControlName="allowAnyHost"/>
              <label class="custom-control-label"
                     for="allowAnyHost"
                     i18n>Allow any host</label>
              <cd-alert-panel *ngIf="initiatorForm.getValue('allowAnyHost')"
                              [showTitle]="false"
                              type="warning">Allowing any host to connect to the NVMe/TCP gateway may pose security risks.
              </cd-alert-panel>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="text-right">
          <cd-form-button-panel (submitActionEvent)="onSubmit()"
                                [form]="initiatorForm"
                                [submitText]="(action | titlecase) + ' ' + (resource | upperFirst)"></cd-form-button-panel>
        </div>
      </div>
    </form>
  </ng-container>
</cd-modal>
